<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button @click="emitSaveCode">保存</el-button>
    </div>
    <v-ace-editor
      v-model:value="codeContent"
      :lang="configAceEditor.lang"
      :theme="configAceEditor.theme"
      :options="options"
      class="vue-ace-editor"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineEmits } from "vue";

import { VAceEditor } from "vue3-ace-editor";
import "@/assets/aceConfig";
import type { Ace } from "ace-builds";

const codeContent = ref(""); // 代码显示的内容
const configAceEditor = ref({
  lang: "javascript",
  theme: "monokai",
});

//代码保存触发父组件方法
// 定义要发出的事件及其参数类型
const emits = defineEmits<{
  (e: "saveCode", message: string): void;
}>();
const emitSaveCode = () => {
  emits("saveCode", codeContent.value);
};

// 编辑器语言
const langs = ref(["javascript", "yaml", "html", "json"]);

const options: Partial<Ace.EditorOptions> = reactive({
  useWorker: true, // 启用语法检查,必须为true
  enableBasicAutocompletion: true, // 自动补全
  enableLiveAutocompletion: true, // 智能补全
  enableSnippets: true, // 启用代码段
  showPrintMargin: false, // 去掉灰色的线，printMarginColumn
  highlightActiveLine: true, // 高亮行
  highlightSelectedWord: true, // 高亮选中的字符
  tabSize: 4, // tab锁进字符
  fontSize: 14, // 设置字号
  wrap: false, // 是否换行
  readonly: false, // 是否可编辑
  // minLines: 10, // 最小行数，minLines和maxLines同时设置之后，可以不用给editor再设置高度
  // maxLines: 50, // 最大行数
});
</script>

<style scoped>
.vue-ace-editor {
  /* ace-editor默认没有高度，所以必须设置高度，或者同时设置最小行和最大行使编辑器的高度自动增高 */
  height: 900px;
  width: 100%;
  font-size: 16px;
  border: 1px solid;
}
</style>
